<template>
	<view class="mypop">
		<u-popup :show="showPop" mode="bottom" height="400px" customStyle="width:100%" :round="10">
			<view class="p-3">
				<view class="" style='position: absolute;right: 40rpx;z-index: 10;'>
					<u-icon name="close" size="20" @click="refuse"></u-icon>
				</view>
				<view class="title" style="text-align: center;color: #081738;font-weight: 500;">
					{{title}}
				</view>
				<scroll-view scroll-y="false" style="height: 400px;">
					<view class="scroll-content">
						<view class="top" >
							<!-- <image :src="proDetails.images" mode="aspectFill"></image> -->
							<u-swiper :list="proDetails.images" height="120" radius="10" style="width: 100%;"  mode="dot" indicator-pos="bottomRight"></u-swiper>
						</view>
						<view class="center">
							{{proDetails.refer||'暂无说明'}}
						</view>
						<view class="bottom">
							<view class="listType" @click="showCard1">
								<view class="left_type">
									<view class="down">
										<view class="">
											优惠价
										</view>
										<view class="">
										</view>
									</view>
									<view class="type_name">
										{{proDetails.name}}
									</view>
								</view>
								<view class="x-r">
									<view class="down_price">
										{{proDetails.actual_payment}}/次
									</view>
									<view class="price">
										原价¥{{proDetails.price}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="jc-sb" style="align-items: center;">
					<view style="width: 30%;margin-right: 20rpx;color: #3BA199;font-weight: 600;font-size: 40rpx;">
						¥{{proDetails.actual_payment}}
					</view>
					<view style="width: 35%;" @click="pay(proDetails.id,proDetails.type_data)?handel1():handel2()">
						<u-button class="custom-style" text="立即支付" color="#fff"
							customStyle="background: linear-gradient(90deg, #2CB9A4 0%, #2CB9A4 100%);color:#fff;border-radius: 20px;">
						</u-button>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>


<script>
	import {
		getWxPhone
	} from '@/request/api.js'
	export default {
		props: ['showPop', 'title', 'tip', 'proDetails'],
		data() {
			return {
				show: false,
				value: '',
				list: [{
						name: '店铺单次卡',
						price: 20,
						checked: true
					},
					{
						name: '店铺单次卡',
						price: 20,
						checked: true
					},
					{
						name: '店铺单次卡',
						price: 20,
						checked: true
					},
					{
						name: '店铺单次卡',
						price: 20,
						checked: true
					},
					{
						name: '店铺单次卡',
						price: 20,
						checked: true
					},
					{
						name: '店铺单次卡',
						price: 20,
						checked: true
					},
					{
						name: '店铺单次卡',
						price: 20,
						checked: true
					},
					{
						name: '店铺单次卡',
						price: 20,
						checked: true
					},
				]
			}
		},
		watch: {
			proDetails: {
				handler(newVal) {
					console.log(newVal, '新的值')
				},
				deep: true
			}
		},
		methods: {
			handel1() {
				console.log(11)
			},
			handel2() {
				this.$emit('refuse', true)
				uni.showToast({
					icon: 'none',
					title: '下单成功'
				})
				console.log(222)
			},
			// pay(){
			// 	uni.navigateTo({
			// 		url:'/components/index/paySuccess?title=支付成功'
			// 	})
			// },
			checkedType(i) {
				this.list[i].checked = !this.list[i].checked
			},
			// 注意返回值为一个数组，单列时取数组的第一个元素即可(只有一个元素)
			submit(e) {
				this.$emit('submit', this.value)
				this.value = ''
			},
			refuse() {
				this.$emit('refuse', true)
			},
			getPhoneNumber(e) {
				// console.log(e.detail.code)
				getWxPhone({
					code: e.detail.code,
					type: 0
				}).then(res => {
					this.$emit('submit')
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	::v-deep .u-icon {
		display: inline !important;
	}
	::v-deep .u-swiper{
		width: 100% !important;
	}
	.mypop {
		width: 90%;
	}

	.scroll-content {
		display: flex;
		flex-direction: column;

		.top {
			display: flex;
			justify-content: space-between;
			margin-top: 40rpx;

			image {
				width: 100%;
				height: 300rpx;
				border-radius: 20rpx;
			}

		}

		.center {
			padding-bottom: 40rpx;
			padding-top: 20rpx;
			font-size: 30rpx;
			color: #555555;
			border-bottom: 0.5px solid rgba(217, 217, 217, 0.3);

		}

		.bottom {
			.listType {
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #2CB9A4;
				padding-bottom: 20rpx;
				border-bottom: 0.5px solid rgba(217, 217, 217, 0.3);
				margin-top: 20rpx;

				.left_type {
					display: flex;
					align-items: center;

					.type_name {
						color: #000;
						font-size: 30rpx;
						font-weight: 600;
						margin-left: 15rpx;
					}
				}

				.down {
					color: #FF6666;
					justify-content: center;
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 10rpx;
					font-size: 22rpx;
					border-radius: 10rpx;
					margin-right: 10rpx;
					background: rgba(255, 102, 102, 0.2);
				}

				.down_price {
					margin-right: 20rpx;
					font-size: 28rpx;
					color: #FF6666;
				}

				.price {
					margin-right: 10rpx;
					font-size: 26rpx;
					text-decoration-line: line-through;
					color: #FF6666;
				}
			}
		}
	}
</style>